import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Select,
  Tabs,
} from 'antd';
import numeral from 'numeral';
import BackStatisticsComponent from './BackStatisticsComponent'
import styles from './Analysis.less';

const { TabPane } = Tabs;
const { Option } = Select;

@connect(({ backStatistics, loading }) => ({
  backStatistics,
  loading: loading.models.backStatistics,
}))

export default class BackStatistics extends Component {
  state = {
    key: 'all',
    currentUser: '',
    paramList: {
      pageNo: 1,
      pageSize: 10,
      userType: 'all-user',
      dateRanges: [],
    }
  };

  componentDidMount() {
    const { dispatch } = this.props;

    this.handleCountFn('up', 'all-user', 'all');
    this.handleTrendFn('all');
    this.handleTableFn('all');
  }

  componentWillUnmount() {

  }

  handleCountFn = (source, type, item) => {
    const { dispatch } = this.props;
    switch (item) {
      case 'back':
        dispatch({
          type: 'backStatistics/fetchLoanEndRepayCount',
          payload: {
            ...{
              userType: type,
              source: source
            }
          },
        });
        break;
      case 'overdue':
        dispatch({
          type: 'backStatistics/fetchOverdueRepayCount',
          payload: {
            ...{
              userType: type,
              source: source
            }
          },
        });
        break;
      case 'all':
        dispatch({
          type: 'backStatistics/fetchTotalRepayCount',
          payload: {
            ...{
              source: source
            }
          },
        });
        break;
      default:
        break;
    }
  }

  handleTrendFn = (type) => {
    const { dispatch } = this.props;
    const { paramList } = this.state;
    let postParam = {
      minDateStr: paramList.dateRanges[0],
      maxDateStr: paramList.dateRanges[1],
      timeType: '',
      userType: paramList.userType,
      source: 'up',
      isTotalRepay: '',
    };
    switch (type) {
      case 'back':
        postParam.isTotalRepay = false;
        dispatch({
          type: 'backStatistics/fetchRepayRateCount',
          payload: {
            ...postParam
          },
        });
        break;
      case 'all':
        postParam.isTotalRepay = true;
        dispatch({
          type: 'backStatistics/fetchRepayRateCount',
          payload: {
            ...postParam
          },
        });
        break;
      case 'overdue':
        postParam.isTotalRepay = '';
        dispatch({
          type: 'backStatistics/fetchOverdueRepayTrend',
          payload: {
            ...postParam
          },
        });
        break;
      default:
        break;
    }
  }

  handleTableFn = (type) => {
    const { dispatch } = this.props;
    const { paramList } = this.state;

    switch (type) {
      case 'back':
        let postParamBack = {
            minDateStr: paramList.dateRanges[0],
            maxDateStr: paramList.dateRanges[1],
            timeType: '',
            pageSize: paramList.pageSize,
            pageNo: paramList.pageNo,
            source: 'up'
        }
        dispatch({
          type: 'backStatistics/fetchLoanEndRepayTable',
          payload: {
            ...postParamBack
          },
        });
        break;
      case 'overdue':
        let postParamOverdue = {
            minDateStr: paramList.dateRanges[0],
            maxDateStr: paramList.dateRanges[1],
            timeType: '',
            userType: paramList.userType,
            pageSize: paramList.pageSize,
            pageNo: paramList.pageNo,
            source: 'up',
        }
        dispatch({
          type: 'backStatistics/fetchOverdueRepayTable',
          payload: {
            ...postParamOverdue
          },
        });
        break;
      case 'all':
        let postParamAll = {
            minDateStr: paramList.dateRanges[0],
            maxDateStr: paramList.dateRanges[1],
            timeType: '',
            pageSize: paramList.pageSize,
            pageNo: paramList.pageNo,
            source: 'up'
        }
        dispatch({
          type: 'backStatistics/fetchTotalRepayTable',
          payload: {
            ...postParamAll
          },
        });
        break;
      default:
        break;
    }
  }

  handleDateRangeChange = (dates, dateStrings) => {
    const {
      key,
      paramList,
    } = this.state;
    [paramList.pageNo, paramList.dateRanges] = [1, dateStrings];
    //刷新折线图
    this.handleTrendFn(key);
    //刷新表格数据
    switch (key) {
      case 'all':
        this.handleTableFn('all')
        break;
      case 'back':
        this.handleTableFn('back')
        break;
      case 'overdue':
        this.handleTableFn('overdue')
        break;
      default:
        break;
    }
  }

  onTabChange = (key, type) => {
    this.setState({
      key: key,
      currentUser: '',
    });
    const { paramList } = this.state;
    [paramList.pageNo, paramList.pageSize, paramList.userType, paramList.dateRanges] = [1, 10, 'all-user', []];
    this.handleTrendFn(key);
    this.handleTableFn(key);
    switch (key) {
      case 'back':
        this.handleCountFn('up', 'all-user', 'back');
        this.handleCountFn('up', 'new-user', 'back');
        this.handleCountFn('up', 'old-user', 'back');
        break;
      case 'overdue':
        this.handleCountFn('up', 'all-user', 'overdue');
        this.handleCountFn('up', 'new-user', 'overdue');
        this.handleCountFn('up', 'old-user', 'overdue');
        break;
      case 'all':
        this.handleCountFn('up', 'all-user', 'all');
        break;
      default:
        break;
    }
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const {
      key,
      paramList,
    } = this.state;

    paramList.pageNo = pagination.current;
    switch (key) {
      case 'back':
        this.handleTableFn('back')
        break;
      case 'overdue':
        this.handleTableFn('overdue')
        break;
      case 'all':
        this.handleTableFn('all');
        break;
      default:
        break;
    }
  };

  handleSelectUserFn = (val) => {
    const {
      key,
      paramList,
    } = this.state;
    if (key == 'overdue') {
      this.setState({
        currentUser: val
      });
      [paramList.pageNo, paramList.userType] = [1, val];
      this.handleTableFn('overdue');
      this.handleTrendFn('overdue');
    }
  }

  render() {
    const { key, currentUser, paramList } = this.state;
    const { backStatistics: {abData, nbData, obData}, loading } = this.props;
    const tabListNoTitle = [{
        key: 'all',
        tab: '总回款',
      }, {
        key: 'back',
        tab: '按期回款',
      }, {
        key: 'overdue',
        tab: '逾期回款',
      },
    ];
    const tableOverdueColumns = [{
        title: '日期',
        dataIndex: 'date',
        key: 'date',
        render: val => `${val}`
      }, {
        title: '在逾本金',
        dataIndex: 'overdueItemAmount',
        key: 'overdueItemAmount',
        render: val => `${val}元`
      }, {
        title: '在逾本息',
        dataIndex: 'overdueTotalAmount',
        key: 'overdueTotalAmount',
        render: val => `${val}元`
      }, {
        title: '逾期本金',
        dataIndex: 'overdueEverItemAmount',
        key: 'overdueEverItemAmount',
        render: val => `${val}元`
      }, {
        title: '逾期还款笔数',
        dataIndex: 'overdueRepayTimes',
        key: 'overdueRepayTimes',
        render: val => `${val}笔`
      }, {
        title: '还款总额',
        dataIndex: 'overdueRepayAmount',
        key: 'overdueRepayAmount',
        render: val => `${val}元`
      }, {
        title: '还款率',
        dataIndex: 'repayRate',
        key: 'repayRate',
        render: val => `${val}`
      }, {
        title: '新用户比例',
        dataIndex: 'newUserPercent',
        key: 'newUserPercent',
        render: val => `${val}`
      }, {
        title: '老用户比例',
        dataIndex: 'oldUserPercent',
        key: 'oldUserPercent',
        render: val => `${val}`
      },
    ];
    const tableRepayColumns = [{
        title: '到期还款日',
        dataIndex: 'date',
        key: 'date',
        render: val => `${val}`
      }, {
        title: '到期应还笔数',
        dataIndex: 'loanEndOrderNum',
        key: 'loanEndOrderNum',
        render: val => `${val}笔`
      }, {
        title: '应还本金',
        dataIndex: 'loanEndItemAmount',
        key: 'loanEndItemAmount',
        render: val => `${val}元`
      }, {
        title: '应还本息',
        dataIndex: 'loanEndTotalAmount',
        key: 'loanEndTotalAmount',
        render: val => `${val}元`
      }, {
        title: '应还利息',
        dataIndex: 'interestAmount',
        key: 'interestAmount',
        render: val => `${val}元`
      }, {
        title: '已还本金',
        dataIndex: 'repayItemAmount',
        key: 'repayItemAmount',
        render: val => `${val}元`
      }, {
        title: '已还本息',
        dataIndex: 'repayItemInterestAmount',
        key: 'repayItemInterestAmount',
        render: val => `${val}元`
      }, {
        title: '  已还利息',
        dataIndex: 'repayInterestAmount',
        key: 'repayInterestAmount',
        render: val => `${val}元`
      }, {
        title: '还款率',
        dataIndex: 'repayRate',
        key: 'repayRate',
        render: val => `${val}`
      }, {
        title: '展期订单总额',
        dataIndex: 'totalExtendAmount',
        key: 'totalExtendAmount',
        render: val => `${val}`
      },
    ];
    const tableAllColumns = [{
        title: '日期',
        dataIndex: 'date',
        key: 'date',
        render: val => `${val}`
      }, {
        title: '到期应还笔数',
        dataIndex: 'loanEndOrderNum',
        key: 'loanEndOrderNum',
        render: val => `${val}笔`
      },{
      title: "当天展期笔数",
      dataIndex: 'todayExtendNum',
      key: 'todayExtendNum',
      render: val => `${val}笔`
      }, {
        title: '到期金额',
        dataIndex: 'loanEndAmount',
        key: 'loanEndAmount',
        render: val => `${val}元`
      }, {
        title: '还款笔数',
        dataIndex: 'repayTimes',
        key: 'repayTimes',
        render: val => `${val}笔`
      }, {
        title: '还款金额',
        dataIndex: 'repayAmount',
        key: 'repayAmount',
        render: val => `${val}元`
      }, {
        title: '还款率',
        dataIndex: 'repayRate',
        key: 'repayRate',
        render: val => `${val}`
      }, {
        title: '到期还款率',
        dataIndex: 'loanEndRepayRate',
        key: 'loanEndRepayRate',
        render: val => `${val}`
      }, {
        title: '逾期还款率',
        dataIndex: 'overdueRepayRate',
        key: 'overdueRepayRate',
        render: val => `${val}`
      }, {
        title: '展期笔数',
        dataIndex: 'extendNum',
        key: 'extendNum',
        render: val => `${val}`
      }, {
        title: '展期费用',
        dataIndex: 'extendAmount',
        key: 'extendAmount',
        render: val => `${val}`
      }, {
        title: '展期订单总额',
        dataIndex: 'totalExtendAmount',
        key: 'totalExtendAmount',
        render: val => `${val}`
      },
    ];
    const overdueSteps = [{
        tit: '全部',
        val: '',
      }, {
        tit: 'S1',
        val: 'S1',
      }, {
        tit: 'S2',
        val: 'S2',
      }, {
        tit: 'S3',
        val: 'S3',
      }, {
        tit: 'S4',
        val: 'S4',
      },
    ];
    const selectUserType = [{
        tit: '全部',
        val: 'all-user'
      }, {
        tit: '新用户',
        val: 'new-user'
      }, {
        tit: '老用户',
        val: 'old-user'
      },
    ];

    return (
      <Fragment>
        <Card
          loading ={loading}
          style={{ width: '100%' }}
          tabList={tabListNoTitle}
          activeTabKey={key}
          onTabChange={(key) => { this.onTabChange(key); }}
        >
          <BackStatisticsComponent
            loading ={loading}
            userType={selectUserType}
            currentUser={currentUser}
            dateRanges = {paramList.dateRanges}
            datePickerFn = {this.handleDateRangeChange}
            overdueSteps = {overdueSteps}
            allData={this.props.backStatistics}
            type = {key}
            columnsAll={tableAllColumns}
            columns1={tableRepayColumns}
            columns2 ={tableOverdueColumns}
            tableChange ={this.handleStandardTableChange}
            userSelectFn  = {this.handleSelectUserFn.bind(this)}
          />
        </Card>

      </Fragment>
    );
  }
}
